import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入组件 /index.vue 可以省略不写
import company from '../views/company'
import find from '../views/find'
import question from '../views/question'
import my from '../views/my'
import userinfo from '../views/userinfo'
import editinfo from '../views/editinfo'
import message from '../views/message'
import login from '../views/login'
import vuex from '../views/vuex'
import techDetail from '../views/techDetail'
import shareDetail from '../views/shareDetail'

// 这个文件不在vue中,需要单独导入
import { Toast } from 'vant'
// 也需要导入仓库
import store from '../store'
// 导入token函数
import { getToken, removeToken } from '../utils/token'
// 用户接口,发ajax请求
import { getUserInfo } from '../api/my'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/company'
  },
  {
    path: '/company',
    component: company,
    meta: {
      // 显示tabbar
      showTabbar: true,
      title: '公司'
    }
  },
  {
    path: '/question',
    component: question,
    meta: {
      // 显示tabbar
      showTabbar: true,
      title: '刷题',
      // 需要登录
      needLogin: true
    }
  },
  {
    path: '/find',
    component: find,
    meta: {
      // 显示tabbar
      showTabbar: true,
      title: '发现'
    }
  },
  {
    path: '/my',
    component: my,
    meta: {
      // 显示tabbar
      showTabbar: true,
      title: '我的',
      // 需要登录的,加这个
      needLogin: true
    }
  },
  {
    path: '/userinfo',
    component: userinfo,
    meta: {
      title: '用户信息',
      needLogin: true
    }
  },
  {
    path: '/editinfo',
    component: editinfo,
    meta: {
      title: '修改信息',
      needLogin: true
    }
  },
  {
    path: '/message',
    component: message,
    meta: {
      title: '用户消息'
    }
  },
  {
    path: '/login',
    component: login,
    meta: {
      title: '用户登录'
    }
  },
  {
    path: '/vuex',
    component: vuex,
    meta: {
      title: '测试路由'
    }
  },
  {
    path: '/techDetail/:id',
    component: techDetail,
    meta: {
      title: '技巧详情'
    }
  },
  {
    path: '/shareDetail/:id',
    component: shareDetail,
    meta: {
      title: '面经详情'
    }
  }
]

const router = new VueRouter({
  routes
})
// 每个守卫方法接收三个参数
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next(): 进行管道中的下一个钩子。
// 前置守卫
router.beforeEach((to, from, next) => {
  // 获取路由上的信息
  // console.log(to.meta.needLogin)
  // 先判断是需要登录的页面
  if (to.meta.needLogin === true) {
    // 再加一层判断,登录状态是对的
    if (store.state.isLogin === true) {
      next()
    } else {
      // 没有登录,就判断有没有token
      if (getToken()) {
        // 有token,则判断token的对错,方法就是拿它去发送请求,如果返回的
        // 状态没问题,则证明这个token是对的.
        getUserInfo().then(res => {
          if (res.data.code === 200) {
            // 登录是对的,保存用户信息
            store.commit('CHANGEUSERINFO', res.data.data)
            // 更改登录状态
            store.commit('CHANGEISLOGIN', true)
            // 可以顺利的访问下一页
            next()
          } else {
            // token 有错误
            removeToken()
            Toast('你好,请先登录再说')
            next('/login')
          }
        })
      } else {
        // 没有token
        Toast('你好,请先登录再说')
        next('/login')
      }
    }
  } else {
    // 不登录就可以访问的页面
    next()
  }
})

export default router
// 路由守卫,这里更该的是页面标签中的title
router.afterEach((to, from) => {
  // console.log('to:', to)
  document.title = to.meta.title
})
